<template>
	<view class="pageBox">
		<!-- <image src="@/static/common/activityPageBG.png" class="pageBG"></image> -->
		<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
		<uni-nav-bar height="88rpx" fixed title="活动签到" color="#000000" :border="false" left-icon="left"
			@clickLeft="$back" statusBar>
		</uni-nav-bar>
		<mescroll-body class="bodyContentBoxF" :sticky="true" ref="mescrollRef" :top="mescroll_top" @init="mescrollInit"
			bottom="136rpx" :down="downOption" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="orderContentBox">
				<!-- <view></view> -->
				<u-checkbox-group v-model="checkAll" placement="column" @change="checkboxChange">
					<view class="enrollCardBox" v-for="(item,index) in dataList.rows" :key="index">
						<view class="applyRow">
							<view class="left">
								<view class="index">{{index+1}}</view>
								<view class="applyName">{{item.createBy}}</view>
							</view>
							<view class="right">
								<u-checkbox :customStyle="{marginBottom: '8px'}" :name="setCheckValue(item)">
								</u-checkbox>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
		</mescroll-body>
		<view class="page-submitBtnBox">
			<view class="page-submitBtn-check" @click="setCheckAll">全选</view>
			<view class="page-submitBtn" @click="openDialog('modal')">提交</view>
		</view>
		<u-modal :show="modalShow" :title="modalOptions.title" :confirmText="modalOptions.onfirmText"
			:cancelText="modalOptions.cancelText" :cancelColor="modalOptions.cancelColor" showCancelButton
			:confirmColor="modalOptions.confirmColor" @confirm="modalconfirm" @cancel="closeDialog"
			@close="closeDialog">
			<view class="Modal-slot-content">
				<view class="modalContent">确认提交所勾选的签到人吗？</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
	import * as systemApi from "@/api/system.js"
	import * as enrollApi from "@/api/enroll.js"
	import * as exchangeApi from "@/api/exchange.js"
	export default {
		mixins: [MescrollMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		// components: {
		// 	searchRow
		// },
		data() {
			return {
				checkAll: [],
				checkAllStr: '',
				clockInShow: false,
				bmModalShow: false,
				statusClass: ['def', 'pass', 'fail'],
				//模态框
				modalShow: false,
				//模态框确认方法
				callback: () => {},
				//当前模态框名字
				now_modalShow: '',
				modalOptions: {
					content: '',
					title: '注意',
					onfirmText: '确认',
					confirmColor: '#6FA9FF',
					cancelText: '取消'
				},
				rules: {
					redeemedBy: {
						type: 'string',
						min: 2,
						required: true,
						message: '请填写核销人',
						trigger: ['blur', 'change']
					},
					redeemCode: {
						type: 'string',
						min: 2,
						required: true,
						message: '请填写兑换码',
						trigger: ['blur', 'change']
					},
					contactInfo: {
						type: 'string',
						min: 2,
						required: true,
						message: '请填写联系方式',
						trigger: ['blur', 'change']
					}
				},
				userInfo: {
					userId: '',
					redeemedBy: '',
					redeemCode: '',
					contactInfo: ''
				},
				mescroll_top: '0rpx',
				searchUrl: 'pages/search/afterSales_Search',
				tabsStyle: {
					height: '88rpx',
					boxSizing: 'border-box'
				},
				tabsAStyle: {
					color: '#6FA9FF'
				},
				tabs: [{
						name: '审核中',
						id: 0
					},
					{
						name: '已通过 ',
						id: 1
					},
					{
						name: '不通过',
						id: 2
					},
					{
						name: '售后记录',
						id: -1
					}
				],
				tabIndex: 0,
				tabIndexOld: 0,
				options: {},
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 8 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '--这里是底线--',
					empty: {
						tip: '暂无' // 提示
					}
				},
				dataList: {
					records: [],
					rows: [],
					pages: 0,
					size: 0,
					total: 0,
					current: 0
				}, //列表数据
				listObj: {
					// indentStatus: 1,
					persentStatus: 0,
					isPass: '1',
				},
				openType: 1,
				canReset: false,
				dicts: {
					approval_status: {},
					consumption_type: {}
				},
				dictList: {
					approval_status: [],
					consumption_type: []
				},
				dataInfo: {}
			}
		},
		mounted() {
			const that = this
			// #ifdef MP
			uni.getSystemInfo({
				success: function(res) {
					that.mescroll_top = 88 + res.statusBarHeight * 2 + 'rpx'
				}
			})
			// #endif
		},
		onLoad(options) {
			console.log(333,options)
			this.options = options
			this.activityId = options.id
			this.getDictDataList('approval_status')
		},
		onShow() {
			this.getUserInfo()
			// that.canReset && that.getData()
			// that.canReset = true
		},
		methods: {
			checkboxChange(value) {
				console.log(value);
				const listStr = []
				value.forEach(item => {
					listStr.push(JSON.parse(item))
				})
				this.checkAllStr = listStr
			},
			setCheckAll() {
				if (this.dataList.rows.length < 1) {
					this.$toast('暂无记录')
					return
				}
				const list = []
				const listStr = []
				this.dataList.rows.forEach(item => {
					const itemData = {
						activityId: item.activityId,
						persentStatus: 1,
						createBy: item.createBy,
						// userId: item.userId,
					}
					list.push(JSON.stringify(itemData))
					listStr.push(itemData)
				})
				this.checkAll = list
				this.checkAllStr = listStr
			},
			setCheckValue(item) {
				const itemData = {
					activityId: item.activityId,
					persentStatus: 1,
					createBy: item.createBy
				}
				return JSON.stringify(itemData)

			},
			getUserInfo() {
				const that = this
				this.$store.dispatch('userBaseInfo').then(res => {
					console.log(res.user);
					this.userInfo = res.user
					this.eliteInfo = res.eliteInfo
					this.downCallback()
				})
			},
			//打开弹窗
			openDialog(openShow = 'modal') {
				if (this.checkAll.length < 1) {
					this.$toast('请先勾选！')
					return
				}
				this.now_modalShow = openShow
				this[openShow + 'Show'] = true
			},
			//关闭弹窗
			closeDialog() {
				this[this.now_modalShow + 'Show'] = false
				this.callback = () => {}
				//this.modalOptions = { ...modalOptions }
			},
			//弹窗确认触发
			modalconfirm() {
				this.submitCheckIn()
			},
			submitCheckIn() {
				const that = this
				var checkAllStr = this.checkAllStr
				console.log(checkAllStr)
				console.log(this.dataList.rows)
				this.dataList.rows.forEach((item,index) => {
					checkAllStr.forEach((item2,index2)=>{
						if(item.createBy == item2.createBy){
							checkAllStr[index2].userId = item.userId
								console.log(index2,item.userId)
						}
					})
					
				})
				console.log(checkAllStr)
				uni.$u.throttle(() => {
					// const params = JSON.stringify(this.checkAllStr)
					enrollApi.batchUpdateByActivity(checkAllStr)
						.then(res => {
							that.$toast1('提交成功', setTimeout(() => {
								that.closeDialog()
								this.checkAll = []
								this.checkAllStr = ''
								that.downCallback()
							}, 600))
						}).catch(that.closeDialog())
				}, 600)
			},
			getDictDataList(dictType) {
				return new Promise((resolve, reject) => {
					systemApi.dictDataList(dictType).then(({
						rows
					}) => {
						let objs = {}
						let keyValues = []
						rows.forEach((item) => {
							objs[item.dictValue] = item.dictLabel
							keyValues.push({
								label: item.dictLabel,
								text: item.dictLabel,
								value: item.dictValue
							})
						})
						this.dicts[dictType] = objs
						this.dictList[dictType] = keyValues
						resolve({
							objs,
							keyValues,
							rows
						})
					}).catch(reject)
				})
			},
			goto(url, data) {
				this.$navTo(`pages/${url}`, data)
			},
			//手动刷新
			getData() {
				let curMescroll = this.$refs.mescrollItem[0].mescroll
				curMescroll && curMescroll.resetUpScroll()
				curMescroll && curMescroll.scrollTo(0, 0)
			},
			tabsChange(e) {
				this.tabIndexOld = this.tabIndex
				this.tabIndex = e.index
				// this.listObj.indentStatus = e.value
				this.dataList.rows = []
				this.downCallback()
			},
			/*下拉刷新的回调 */
			downCallback(page) {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				this.checkAll = []
				this.checkAllStr = ''
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				const that = this
				if (that.$store.getters.token) {
					this.getDataList({
						pageNum: page.num,
						pageSize: page.size,
						activityId: this.activityId,

						...that.listObj
					}).then(list => {
						const curPageLen = list.rows.length
						const totalSize = list.total
						that.mescroll.endBySize(curPageLen, totalSize)
					}).catch(err => {
						that.mescroll.endErr()
					})
				} else {
					that.mescroll.endBySize(0, 0)
					return
				}
			},
			/**
			 * @param {Object} page 页码
			 */
			getDataList(pageObj) {
				const that = this
				return new Promise((resolve, reject) => {
					enrollApi.enrollList(pageObj).then((data) => {
						let dataList = JSON.parse(JSON.stringify(that.dataList))
						dataList.pageSize = pageObj.pageSize
						dataList.pageNum = pageObj.pageNum
						dataList.total = data.total
						dataList.pages = Math.ceil(data.total / dataList.pageSize)
						// 合并新数据
						const newList = data.rows
						// 如果是第一页需手动制空列表
						if (pageObj.pageNum == 1) dataList.rows = []
						// 合并新数据
						dataList.rows = dataList.rows.concat(newList)
						that.dataList = dataList
						resolve(that.dataList)
					}).catch(reject)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/utils/viewScss/info.scss";

	.pageBG {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	.bodyContentBoxF {
		position: relative;
		z-index: 1;
	}

	/deep/ .bm .u-modal__content {
		padding: 30rpx 0 0 0 !important;
	}

	.page-submitBtnBox {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 106rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;

		.page-submitBtn-check {
			font-size: 24rpx;
			font-family: Songti SC, Songti SC;
			font-weight: bold;
			color: #0086f6;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 60rpx;
			height: 50rpx;
			padding: 0 16rpx;
			font-size: 30rpx;
			// border: 2rpx solid #6FA9FF;
		}

		.page-submitBtn {
			width: 100%;
			height: 70rpx;
			// background: linear-gradient(90deg, #6FA9FF 0%, #6FA9FF 100%);
			background-color: #0086f6;
			border-radius: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.modalContent {
		text-align: center;
		margin: 20rpx 0;
		max-height: 80vh;
	}

	.pageBox {
		// background-color: #C6E6FF !important;

		.tabsBG {
			padding-left: 30rpx;
			background-color: #F4F7FF;
		}

		background-color: #F4F7FF;

		.orderContentBox {
			padding: 30rpx;
		}



		.enrollCardBox {
			padding: 0 30rpx;
			border-radius: 18rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			box-sizing: border-box;

			.applyRow {
				width: 100%;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 36rpx 0;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.index {
						min-width: 60rpx;
						flex-shrink: 0;
					}

					.index,
					.applyName {
						font-family: PingFang SC, PingFang SC;
						// font-weight: normal;
						font-size: 30rpx;
						color: #000000;
					}
				}

				.right {
					flex-shrink: 0;
					// display: flex;
					// align-items: center;

					::v-deep.u-checkbox.u-checkbox-label--left {
						margin-bottom: 0 !important;
					}
				}

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}

				.numberIndex {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					width: 50rpx;
				}
			}
		}
	}
</style>